<template>
    <view class="list">
        <z-paging
            ref="paging"
            :refresher-out-rate="0.8"
            :auto-clean-list-when-reload="false"
            bg-color="#F5F5F5"
            :refresher-status.sync="refresherStatus"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            empty-view-text="暂无内容"
            v-model="dataList"
            @query="queryList"
        >
            <view class="item flex_wrap">
                <view
                    class="cellBox flex_wrap flex_column row_center-column_center"
                    v-for="(item, index) in dataList"
                    :key="index"
                    @click="toInitiateMeeting(item.id)"
                >
                    <u--image
                        :src="itemSrc(item)"
                        radius="16rpx"
                        width="208rpx"
                        height="332rpx"
                        style="margin: 20rpx"
                        ><template v-slot:loading>
                            <u-loading-icon></u-loading-icon> </template></u--image
                    >{{ item.name }}
                </view>
            </view>
            <u-modal
                :show="show"
                title="制作邀请函"
                confirmText="下一步"
                @confirm="confirm"
                :closeOnClickOverlay="true"
                @close="
                    value = '';
                    show = false;
                "
            >
                <view class="slot-content">
                    <u--input
                        placeholder="请输入邀请函名称"
                        border="surround"
                        v-model="value"
                    ></u--input>
                </view>
            </u-modal>
        </z-paging>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
import { usableList } from "@/api/invitationCardMake";
let makeid = "";
let meetId = "";
export default {
    computed: mapGetters(["userInfo"]),
    options: {
        styleIsolation: "shared", // 解除样式隔离
    },
    data() {
        return {
            dataList: [1, 2, 3, 4, 5],
            show: false,
            value: "",
        };
    },
    computed: {
        itemSrc() {
            return ({ config }) => {
                if (config) {
                    config = JSON.parse(config);
                    console.log("config :>> ", config);
                    return config.pages[0]["bgImage"];
                }
            };
        },
    },
    onLoad(o) {
        meetId = o?.meetId ?? "";
        console.log("o :>> ", o);
    },
    methods: {
        //立即制作
        toInitiateMeeting(id) {
            this.show = true;
            makeid = id;
        },
        confirm() {
            if (!this.value) return uni.$u.toast("请输入邀请函名称");
            uni.$u.route({
                url: `pages_invitationCard/makeCard/index?id=${makeid}&letterName=${this.value}&meetId=${meetId}`,
            });
        },
        async queryList(pageNo, pageSize) {
            const that = this;
            const params = {
                pageSize: pageSize,
                pageNum: pageNo,
                status: 1,
            };
            let result;
            result = await usableList(params);
            console.log("object :>> ", result.data.rows);
            that.$refs.paging.completeByTotal(result.data.rows, result.total);
        },
    },
};
</script>

<style lang="scss" scoped>
.item {
    // padding: 50rpx;
    padding: 10rpx 28rpx;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.bottom {
    width: 100%;
    height: 100rpx;
    background-color: #fff;
}

.cellBox {
    width: 208rpx;
    height: 332rpx;
    margin: 40rpx 10rpx;
    font-size: 34rpx;
    color: #3d3d3d;
}
::v-deep .u-cell__body {
    padding: 0 !important;
}
</style>
